<template>
  <div class="navigator">
    <van-tabbar v-model="active" @change="tabChange">
      <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
      <van-tabbar-item icon="search">标签2</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
  export default {
      data() {
          return{
              active:0
          }
      },
      methods: {
        tabChange() {
          console.log(this.active, 'value of active.........');
          console.log(this.$route)
        }
      }
  };
</script>
<style lang="less" scoped>
  .navigator {
    height: 50px;
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
  }
</style>
